<template>
	<view class="content">
		<view class="add" @click="goInfo('add')">
			<view class="iconfont icon-plus"></view>
		</view>
		<view class="section-0">
			<view class="header-space"></view>
			<view class="tab">
				<view  @click="setCurIdx(idx, item.type)" :class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`" v-for="(item, idx) in tabList" :key="item.type">
					<view class="label">{{item.name}}<image mode="aspectFit" :src="item.url"></image></view>
					<view class="count">
						{{statistics[item.type]}}<text>个</text>
					</view>
					<view class="shape">
						<view class="shape-body"></view>
					</view>
					<view class="shape shape-mirrow">
						<view class="shape-body"></view>
					</view>
				</view>
			</view>
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="144" bottom="-144" @up="upCallback" :up="upOption" :down="{use: false}">
				<view class="list-container" style="background-color: #10298a;">
					<view :class="`list list__${curIdx}`">
						<view class="item" v-for="item in list" :key="item.index">
							<view class="title">
								<view class="status">
									<view class="logo">
										<text v-if="curIdx !== 1">{{item.create_user.charAt(0)}}</text>
										<text v-if="curIdx === 1">我</text>
									</view>
									<view class="name" v-if="curIdx !== 1">{{item.create_user}}</view>
									<view class="check" v-if="curIdx === 0">
										<!-- <view v-if="curIdx === 2" class="iconfont icon-duigou"></view> -->
									</view>
									<view class="actions" v-if="curIdx !== 0" >
										<text @click="handleRecall(item)" v-if="curIdx === 1" class="iconfont icon-chehui"></text>
										<text @click="handleDel(item)" class="iconfont icon-shanchu"></text>
									</view>
								</view>	
							</view>
							<view class="body"  @click="goInfo(curType, item.id)">
								<view :class="`info info__${curType}`">
									<view class="name">
										{{item.yj_title}}
										<text>{{item.yj_date}}</text>
									</view>
									<view class="msg">{{item.yj_content}}</view>
									<view></view>
									<view class="delay" v-if ="item.status ==1">截止至 {{item.end_date.substring(0, 10)}} {{item.overdue}}</view>
									<view class="sender" v-if="false">发送人: {{item.create_user}}</view>	
									<view class="sender" v-if="curIdx === 1">接收人: {{item.receive_user}}</view>	
									<view class="finish" v-if="curIdx === 2">
										<image mode="aspectFit" src="../../src/imgs/todo-done.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<!-- <tabbar></tabbar> -->
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/index.vue'
	import { todoListApi, todoStatisticsApi, todoDeleteApi, todoRecallApi } from '../../api/todo.js';
	import { mapGetters } from 'vuex';
	export default {
		components: { tabbar },
		data() {
			return {
				tabList: [
					{ type: 'receive', name: '我收到的待办', url: require('../../src/imgs/todo-tab-icon-receive.png')},
					{ type: 'send', name: '我发起的待办', url: require('../../src/imgs/todo-tab-icon-initiate.png')},
					{ type: 'done', name: '已处理的待办', url: require('../../src/imgs/todo-tab-icon-done.png')},
				],
				list: [],
				curIdx: 0,
				curType: 'receive',
				statistics: {
					receive: 0,
					done: 0,
					send: 0,
				},
				fetched: false,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption:{
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 10,
			};
		},
		computed: {
			...mapGetters({userInfo: "system/getUserInfo"})
		},
		methods: {
			handleDel(item) {
				uni.showModal({
					title: '确定删除？',
					success: async (res) => {
						if (res.confirm) {
							if (this.curType === 'done') {
								await this.deleteTodo(item.task_id);
							} else {
								await this.deleteTodo(item.id);
							}
							this.fetchStatistics();
							this.mescroll.resetUpScroll();
this.mescroll.scrollTo(0,0);
						} else if (res.cancel) {
							
						}
					}
				});	
			},
			handleRecall(item) {
				uni.showModal({
					title: '确定撤回？',
					success: async (res) => {
						if (res.confirm) {
							await this.recallTodo(item.id);
							this.fetchStatistics();
						} else if (res.cancel) {
							
						}
					}
				});	
			},
			handleEdit(item) {
				this.goInfo('edit', item.id)
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				uni.showLoading({
					title: '加载中...'
				})
				const {data} =  await todoListApi({name: this.userInfo.nick_name, type: this.curType, pageNum: page.num, pageSize: this.pageSize});
				uni.hideLoading();
				console.log(data,999);
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.last_page;
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			setCurIdx(idx, type) {
				this.curIdx = idx;
				this.curType = type;
				this.mescroll.resetUpScroll();
this.mescroll.scrollTo(0,0);
			},
			goInfo(type, id) {
				uni.navigateTo({
					url: `/pages/todo/info/index?type=${type}&id=${id}`,
				})
			},
			// async fetchList() {
			// 	uni.showLoading({title: '加载中...'});
			// 	const { data } = await todoListApi({name: this.userInfo.nick_name, type: this.curType});
			// 	if (data.code === 1) {
			// 		this.list = data.data.list;
			// 	}
			// 	uni.hideLoading();
			// },
			async fetchStatistics() {
				uni.showLoading({title: '加载中...'});
				const { data } = await todoStatisticsApi({name: this.userInfo.nick_name});
				if (data.code === 1) {
					this.statistics = data.data;
				}
				uni.hideLoading();
			},
			async deleteTodo(id) {
				uni.showLoading({title: '加载中...'});
				const { data } = await todoDeleteApi({id, type: this.curType});
				if (data.code === 1) {
					uni.showToast(
						{title: '删除成功', duration: 1000, icon: 'null' }
					);
				}
				uni.hideLoading();
			},
			async recallTodo(id) {
				uni.showToast(
					{title: '回退成功', duration: 1000, icon: 'null' }
				);
				uni.showLoading({title: '加载中...'});
				const { data } = await todoRecallApi({id});
				uni.hideLoading();
				if (data.code === 1) {
					// uni.showToast(
					// 	{title: '回退成功', duration: 1000, icon: 'null' }
					// );
					this.mescroll.resetUpScroll();
this.mescroll.scrollTo(0,0);
				} else {
					console.log( data.data);
					uni.showToast({
						title: data.data,
						duration: 1000, icon: 'error'
					})
				}
			}
		},
		onShow() {
			// this.fetchList();
			this.fetchStatistics();
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
	}
</script>

<style lang="scss" scoped>
	// .tab-space{
	// 	width: 100%;
	// 	height: 140rpx;
	// }
	.content{
		width: 100%;
		background-color: #2e5efe;
		position: relative;
		.add{
			position: fixed;
			border-radius: 50%;
			width: 88rpx;
			height: 88rpx;
			background-color: #1d33c6;
			box-shadow: 0rpx 14rpx 22rpx 0rpx d
				rgba(8, 2, 3, 0.2);
			right: 50rpx;
			bottom: 220rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 26rpx;
			z-index: 20;
		}
		.section-0{
			width: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #10298a;
			overflow: hidden;
			.tab{
				width: 100%;
				height: 144rpx;
				@include clear();
				background-color: #10298a;
				// position: fixed;
				// z-index: 999;
	
				.item{
					width: 33.33%;
					float: left;
					height: 144rpx;
					background-color: #10298a;
					position: relative;
					.label{
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						padding-left: 10%;
						width: 100%;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						padding-top: 25rpx;
						image{
							width: 19rpx;
							height: 21rpx;
							margin-left: 10rpx;
						}
					}
					.count{
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						padding-left: 10%;
						font-size: 58rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffdc00;
						font-weight: bold;
						text {
							font-family: SourceHanSansCN-Regular;
							font-size: 26rpx;
							font-weight: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
						}
					}
					.shape{
						z-index: 1;
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -50rpx;
						background: #000;
						display: none;
						background-color: #1d33c6;
						overflow: hidden;
						.shape-body{
							width: 50rpx;
							height: 50rpx;
							background-color: #10298a;
							border-bottom-right-radius: 50rpx;
						}
					}
					.shape-mirrow{
						z-index: 1;
						left: 0;
						display: none;
						.shape-body{
							border-bottom-right-radius: 0rpx;
							border-bottom-left-radius: 50rpx;
						}
					}
				}
				.item__active{
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					background-color: #1d33c6;
					.shape{
						display: block;
					}
					.shape-mirrow{
						display: none;
					}
				}
				.item__active_next{
					border-bottom-right-radius: 50rpx;
					.shape{
						display: none;
					}
					.shape-mirrow{
						display: block;
					}
				}
			}
			.list{
				padding-top: 50rpx;
				width: 100%;
				background: #1d33c5;
				border-top-right-radius: 50rpx;
				border-top-left-radius: 50rpx;
				padding-bottom: 34rpx;
				.item{
					width: 668rpx;
					border-radius: 21rpx;
					margin: 0 auto;
					background: #fff;
					overflow: hidden;
					margin-bottom: 34rpx;
					.title{
						box-sizing: border-box;
						width: 100%;
						padding: 0 35rpx;
						height: 110rpx;
						background: #fff;
						.status{
							width: 100%;
							height: 50rpx;
							padding-top: 30rpx;
							@include clear();
							.actions{
								float: right;
								text{
									font-size: 32rpx;
									color: #9b9b9b;
									margin-left: 32rpx;
								}
							}
							.logo{
								float: left;
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								background: #1534cd;
								text-align: center;
								line-height: 50rpx;
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								color: #fff;
							}
							.name{
								height: 50rpx;
								line-height: 50rpx;
								float: left;
								margin-left: 10rpx;
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								color: #000;
							}
							.check{
								box-sizing: border-box;
								border-radius: 50%;
								float: right;
								width: 50rpx;
								height: 50rpx;
								border: solid 1rpx #000;
								text-align: center;
								line-height: 48rpx;
								font-size: 26rpx;
								color: #000;
							}
						}
					}
					.body{
						width: 100%;
						background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #fff 20%);
						padding: 30rpx 0;
						.info{
							position: relative;
							padding: 0 35rpx;
							.name{
								font-size: 26rpx;
								font-weight: bold;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: #000000;
								margin-bottom: 16rpx;
								text{
									font-size: 26rpx;
									font-weight: normal;
									letter-spacing: 0rpx;
									color: #000000;
									margin-left: 8rpx;
								}
							}
							.msg{
								max-width: 100%;
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: #000000;
								margin-bottom: 16rpx;
							}
							.delay{
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: #ff0000;
								margin-bottom: 26rpx;
							}
							.sender{
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: #000000;
							}
							.finish{
								position: absolute;
								top: 52rpx;
								right: 72rpx;
								image{
									width: 134rpx;
									height: 134rpx;
								}
							}
							
						}
						.info__done{
							.msg{
								max-width: calc(100% - 210rpx);
							}
						}
					}
				}
			}
			.list__0 {
				border-top-left-radius: 0rpx;
			}
			.list__2 {
				border-top-right-radius: 0rpx;
			}
		}
	}
</style>

